<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
export default {
  name: 'PieChart2',
  props: ['rData'],
  data() {
    return {
      option: {
        color: ['#EC7A6D', '#2D4454', '#007AFF', '#BCE5FA', '#80A7D6', '#85C89D', '#fc8452', '#9a60b4', '#ea7ccc'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: '10%'
        },
        series: [
          {
            name: '院士职业分布',
            type: 'pie',
            radius: ['40%', '70%'],
            left: '-10%',
            label: {
              formatter: (params) => {
                return Math.round(params.percent) + '%'
              }
            },
            data: [
              { value: 1048, name: '职业A' },
              { value: 735, name: '职业B' },
              { value: 580, name: '职业C' },
              { value: 484, name: '职业D' },
              { value: 300, name: '职业E' },
              { value: 484, name: '职业F' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
